<template>
    <el-form ref="formRef" :model="formData" label-width="120px">
        <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">SD绘画配置</div>
            <el-form-item label="功能开启" prop="status" required>
                <div>
                    <el-switch
                        v-model="formData.status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                    <div class="form-tips !text-[14px] flex items-center">
                        功能关闭后，用户将无法访问该功能
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="服务接口" prop="agency_api" required>
                <div>
                    <div class="flex">
                        <el-input
                            placeholder="请输入API域名"
                            class="w-[400px]"
                            v-model="formData.agency_api"
                        />
                    </div>
                    <div class="form-tips !text-[14px]">
                        该参数为必填项，用于调用您本地部署的SD服务。
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="应用名称" prop="name">
                <div>
                    <div class="flex">
                        <el-input
                            placeholder="请输入应用名称"
                            class="w-[400px]"
                            v-model="formData.name"
                        />
                    </div>
                    <div class="form-tips !text-[14px]">
                        不填写前台则显示默认名称(SD绘画)
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="消耗积分" prop="points">
                <div>
                    <el-input-number
                        v-model="formData.points"
                        :min="0"
                    />
                    <div class="form-tips !text-[14px]">
                        填写0则表示不消耗积分
                    </div>
                </div>
            </el-form-item>
        </el-card>

        <!-- 保存按钮 -->
        <el-card shadow="never" class="!border-none mt-4">
            <el-button
                v-perms="['draws:setting:sd_save']"
                :loading="loading"
                type="primary"
                @click="handleSubmit"
            >保存配置</el-button>
        </el-card>
    </el-form>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import drawsSettingApi from '@/api/apply/draws/setting'

const loading = ref(false)
const formRef = ref()
const formData = reactive({
    status: 0,
    points: 0,
    name: '',
    agency_api: ''
})

/**
 * 查询配置参数
 */
const queryConfigs = async (): Promise<void> => {
    const data = await drawsSettingApi.sd_detail()
    Object.assign(formData, data)
}

/**
 * 提交修改参数
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()

    loading.value = true
    await drawsSettingApi.sd_save(formData)
        .finally(() => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        })

    await queryConfigs()
    feedback.msgSuccess('保存成功')
}

onMounted(async () => {
    await queryConfigs()
})
</script>
